<template>
  <div class="creator">
    <TopHeader v-show="!videoFullscreen" :show-more="false" @back="back" @share="shareLink"></TopHeader>
    <div class="personal bg-background">
      <div class="bg">
        <EncryptImage :src="userData.background_img" object-fit="cover" click-to-full></EncryptImage>
      </div>
      <div class="content">
        <AvatarContainer :avatar="userData.avatar" :vip="isVip" :tier="userData.tier">
          <template #buttons>
            <button class="primary-btn personal-btn" @click="emits('toPage', `preview`)">
              {{ $t('common.preview') }}
            </button>
            <button class="primary-btn personal-btn" @click="emits('toPage', 'settings')">
              {{ $t('common.mainPageSetting') }}
            </button>
          </template>
        </AvatarContainer>
        <CreatorInfo
          :username="userData.username"
          :display-name="userData.nickname"
          :vip="isVip"
          :fans="userData.fans"
          :post="userData.post"
          :watches="userData.view"
          :description="userData.bio"
          :link-instagram="userData.link_instagram"
          :link-tiktok="userData.link_tiktok"
          :link-twitter="userData.link_twitter"
          :link-vida="userData.link_vida"
        ></CreatorInfo>
        <div class="media">
          <MediaWall
            v-model="media"
            :free-data="fetcher.free.dataList"
            :subs-data="fetcher.subs.dataList"
            :shop-data="fetcher.shop.dataList"
            :free-loading="fetcher.free.loading"
            :subs-loading="fetcher.subs.loading"
            :shop-loading="fetcher.shop.loading"
            :free-no-more="fetcher.free.noMore"
            :subs-no-more="fetcher.subs.noMore"
            :shop-no-more="fetcher.shop.noMore"
            @intersect="fetcher[`${mediaType}`].nextPage"
            @bounding="onBounding"
          ></MediaWall>
        </div>
      </div>
    </div>
    <ExpanalViewer v-model="viewerOpen" :prevBounds="prevBounds">
      <template #default>
        <Feed :item="viewerData"></Feed>
      </template>
    </ExpanalViewer>
  </div>
</template>

<script setup>
import { computed, provide, ref, shallowRef } from 'vue'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useAppStore } from '@/store/app'
import ExpanalViewer from '@/components/common/ExpanalViewer.vue'
import Feed from '@/components/common/Feed.vue'
import AvatarContainer from '@/components/layout/creator/AvatarContainer.vue'
import CreatorInfo from '@/components/layout/creator/CreatorInfo.vue'
import TopHeader from '@/components/layout/creator/TopHeader.vue'
import MediaWall from '@/components/media/MediaWall.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { useCopyToClipboard } from '@/compositions/utils/copyToClipboard'
import { FEED_PERMISION, MEDIA_TYPE } from '@/constant'
import API from '@/http'

const accountStore = useAccountStore()
const { userData, isVip } = storeToRefs(accountStore)
provide('creator', userData)

const emits = defineEmits(['toPage', 'back'])

defineProps({
  id: { type: Number, defualt: 0 },
})

const media = ref(MEDIA_TYPE.FREE)

const fetcher = ref({
  free: useInfinite({
    request: API.Media.getPostList,
    params: { aff: userData.value.aff, visible: FEED_PERMISION.ALL },
  }),
  subs: useInfinite({
    request: API.Media.getPostList,
    params: { aff: userData.value.aff, visible: FEED_PERMISION.SUB },
  }),
  shop: useInfinite({
    request: API.Media.getPostList,
    params: { aff: userData.value.aff, visible: FEED_PERMISION.SHOP },
  }),
})
fetcher.value.free.init()
fetcher.value.subs.init()
fetcher.value.shop.init()

const mediaType = computed(() =>
  media.value === MEDIA_TYPE.SUBS ? 'subs' : media.value === MEDIA_TYPE.SHOP ? 'shop' : 'free',
)

// 複製連結
const { copy } = useCopyToClipboard()
async function shareLink() {
  if (viewerOpen.value && mediaType.value !== 'shop') {
    copy(viewerData.value.share_url)
  } else {
    copy(userData.value.share_url)
  }
}

function back() {
  emits('back')
}

const appStore = useAppStore()
const { videoFullscreen } = storeToRefs(appStore)

// viewer 開關效果
provide('enableEmitBounding', true)
const prevBounds = ref(null)
const viewerOpen = ref(false)
const viewerData = shallowRef(null)

function openExpandViewer() {
  viewerOpen.value = true
}

function onBounding(bounds, index) {
  prevBounds.value = {
    x: bounds.x + bounds.width / 2 - window.innerWidth / 2,
    y: bounds.y + bounds.height / 2 - window.innerHeight / 2,
    sx: bounds.width / window.innerWidth,
    sy: bounds.height / window.innerHeight,
  }
  viewerData.value = fetcher.value[`${mediaType.value}`].dataList[index]

  openExpandViewer()
}
</script>

<style lang="scss" scoped>
.fold-enter-active,
.fold-leave-active {
  transition: transform 0.3s ease-in;
}
.fold-enter-from,
.fold-leave-to {
  transform: translateX(4rem);
}

.creator {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.personal {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  .bg {
    width: 100%;
    height: 9.5625rem;
    color: mediumorchid;
    background-color: cadetblue;
  }

  .content {
    height: calc(100% - 40.8vw + 2.5rem);
    transform: translateY(-2.5rem);
  }
}
</style>
